import Taro, { redirectTo, setNavigationBarTitle, getCurrentInstance, useDidShow } from '@tarojs/taro'
import { View, Image, Text } from '@tarojs/components'
import { AtIcon, AtForm, AtButton, AtInput } from 'taro-ui'
import React, { useState, useEffect } from 'react'

import api from '../../utils/api'
import { useAsyncEffect } from '../../utils/index'

import Step1 from './components/step1'
import Step2 from './components/step2'
import Step3 from './components/step3'
import Step4 from './components/step4'

import './steps.less'

function AuthSteps() {
  useDidShow(() => {
    setNavigationBarTitle({
      title: '认证'
    })
  })
  useEffect(() => {
    let type = parseInt(getCurrentInstance().router.params.type)
    console.log(type)
    if (type === 1) {
      setCurrentStep(0)
    } else if (type === 2 || type === 3) {
      setCurrentStep(1)
    } else if (type === 4) {
      setCurrentStep(2)
    } else if (type === 5) {
      setCurrentStep(3)
    }
  }, [])
  
  const [currentStep, setCurrentStep] = useState(0)

  const handleNext = (val) => {
    setCurrentStep(val)
  }
  return (
    <View className='steps'>
      {
        currentStep === 0 ? <Step1 handleNext={handleNext} /> :
          currentStep === 1 ? <Step2 handleNext={handleNext} /> : 
            currentStep === 2 ? <Step3 handleNext={handleNext} /> : <Step4 handleNext={handleNext} />
        
      }
      
    </View>
  )
}

export default AuthSteps
